<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <title>ABCDessin</title>

 	<link rel="stylesheet" href="jquery.mobile.custom/custom.css" />
    <link rel="stylesheet" href="jquery.mobile/jquery.mobile.structure-1.2.0.css" />
    <link rel="stylesheet" href="css/icons-pack/jqm-icons.css" />
    <link rel="stylesheet" href="css/style.css" />

    <script src="jquery.mobile/jquery-1.7.2.min.js"></script>
	<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
	<script type="text/javascript" charset="utf-8" src="js-project/image-handler.js"></script>
    <script type="text/javascript" charset="utf-8" src="js-project/song-handler.js"></script>
    <script type="text/javascript" charset="utf-8" src="js-project/bdd-handler.js"></script>
    <script type="text/javascript" src="js-project/sketch2.js"></script>
    <script type="text/javascript" src="js-project/dessin.js"></script>
    <script type="text/javascript" charset="utf-8" src="index.js"></script>
  

    <script type="text/javascript">  
        var myScoreManager = new scoreManager();
        jQuery(document).ready(function(){
            canvas = document.getElementById('simple_sketch');
            context = canvas.getContext('2d');
            
            var win = window,
                doc = document,
                w = win.innerWidth - (win.innerWidth * 0.03),
                h = win.innerHeight - (win.innerHeight * 0.4),
                container = doc.getElementById('container');
            
            canvas.height = h;
            canvas.width = w;
            canvas.style.height = h+"px";
            canvas.style.width = w+"px";
            container.style.height = h+"px";
            container.style.width = w+"px";
            
            $('#simple_sketch').sketch({defaultSize: 18});

            jQuery("#generate").click(function(){
                generate();
                pixelsDeb = analyse();
            });

            jQuery("#validate").click(function(){
                pixelsFin = analyse();
                validate();
            });

            generate();
        });          
    </script>
  
	<!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
	<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
	<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
	<!-- <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
	</head>
  
  <body>
	<div data-role="page" data-theme="a" id="page-dessiner" class="type-interior"  style="background-image:url(media/images/background1.jpg);background-size:100% 100%;">
		<div data-role="header" >
			<h1>Dessiner</h1>
	 		<a href="index.html" rel="external"  data-icon="home" data-iconpos="notext" id="intro" class="ui-btn-right">Accueil</a>
		</div>
		<div data-role="content" data-theme="a" style="background:none;">
	  		<div id="container" name="container">
                <canvas id="simple_sketch" style="border: 1px solid #666666;">
                </canvas>
            </div>
            <div>
                <button id="validate" name="validate">Valider</button>
                <button id="generate" name="generate" data-tool="eraser">G&eacute;n&eacute;rer</button>
            </div>
            <div id="result" name="result">
            </div>  
		</div>
	</div>			
  </body>
</html>
